<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            *{
                margin:0;
                padding:0;
                font-family:'Microsoft Yahei'
            }
            .wrap{
                width:463px;
                height:292px;
                border:solid 1px #d4d4d4;
                background:white;
                border-radius:5px;
                box-shadow:0 0 15px #d4d4d4;
                position:fixed;
                top:50%;
                left:50%;
                margin-left:-232.5px;
                margin-top:-147px;
            }
            .close{
                width:47px;
                height:25px;
                position:absolute;
                right:0;
                top:0;
                background:url(img/qq.png) no-repeat;
            }
            .close:hover{

    background: url(img/qq.png) no-repeat 0px -25px;
            }
            .chat{
               /* margin-bottom:42px;*/
                font-size:16px;
                color:#333;
                position:absolute;
                left:35px;
                top:45px;
            }
            .qq{
                width:246px;
                height:111px;
                position:absolute;
                left:110px;
                top:115px;
               /* border:solid 1px red;*/
            }
            dl{
                width:88px;
                height:111px;
               /* border:solid 1px blue;*/
                /*float:left;*/
            }
            .left{
               float:left;
            }
            .left dt{
                 width:76px;
                height:76px;
                border:double 5px #D7D7D7;
                background:url(img/qq.png) no-repeat -51px 1px;
            }
            .left dt:hover{
                border:solid 5px #CDE6FF;
                box-shadow:0 0 1px 2px #CDE6FF;
            }
            .right{
               float:right;
           }
            .right dt{
                 width:76px;
                height:76px;
                border:double 5px #D7D7D7;
                background:url(img/qq.png) no-repeat -131px 1px;
            }
            .right dt:hover{
                border:solid 5px #CDE6FF;
                box-shadow:0 0 1px 2px #CDE6FF;
            }
            dd{
                padding-top:10px;
                text-align:center;
                width:88px;
            }
            a{
                font-size:14px;
                text-decoration: none;
                 color:#00a2e6;
            }
            .an{
               color:#8e8e8e;
               font-size:12px;
               position:absolute;
               right:5px;
               bottom:5px; 
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class='close'></div>
            <p class='chat'>请选择发起聊天的方式:</p>
            <div class="qq">
                <dl class="left" >
                    <dt></dt>
                    <dd><a href="">QQ账号聊天</a></dd>
                </dl>
                <dl class="right" >
                    <dt></dt>
                    <dd><a href="">匿名聊天</a></dd>
                </dl>
            </div>
            <p class='an'>安装QQ</p>
        </div>
    </body>
</html>